<template>
  <div class="chat">
    <van-nav-bar
      :title="'多人聊天(当前在线：'+updateData.onlineCount+'人)'"
      @click-left="$router.go(-1)"
      @click-right="show = true"
      class="nav"
      left-arrow
      left-text="返回"
      right-text="列表"
    />
    <div class="message-c">
      <div class="message-l">{{userInfo.username}}&nbsp; &nbsp;{{type}} &nbsp;&nbsp;&nbsp; {{loginTime}}</div>
      <div :key="index" class="message-l" v-for="(item,index) in messageList">
        {{item.username}} &nbsp; &nbsp;&nbsp; &nbsp; {{item.addtime}} <br />
        <span class="content">{{item.content}}</span>
      </div>
    </div>

    <van-field center class="send-c" clearable label placeholder="请输入信息" v-model="message">
      <template #button>
        <van-button @click="submitMessage" size="small" style="padding: 5px 20px" type="primary">发送</van-button>
      </template>
    </van-field>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <div class="block">
          <div class="user-line">
            用户列表
          </div>
          <div class="user-line" v-for="(item, index) in updateData.onlineUsers" :key="index">
            {{item}}
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  name: 'chat',
  data() {
    return {
      message: '',
      loginTime: '',
      show: false,
      type:'',
      userInfo: {},
      updateData: {
        onlineCount: 0,
        onlineUsers: {}
      },
      socket: {},
      messageList: [],
    };
  },
  methods: {
    updateMessage(data, type) {
      this.updateData = data;
      if(type === 'login'){
        this.type ="加入群聊"
      }else{
        this.type ="退出群聊"
      }
      console.log(data)
      console.log(type);
    },
    submitMessage() {
      if (this.message != '') {
        var obj = {
          ...this.userInfo,
          content: this.message,
        };
        this.socket.emit('message', obj);
        this.message = '';
        return;
      }
      alert('请输入聊天内容');
    },
  },
  created() {
    const _this = this;
    if (!window.socket) {
      _this.$router.replace('/');
    }
    //监听新用户登录
    window.socket.on('login', (data) => {
      _this.updateMessage(data, 'login');
    });

    //监听用户退出
    window.socket.on('logout', (data) => {
      _this.updateMessage(data, 'logout');
    });
    
    window.socket.on('message', (dataObj) => {
      this.messageList.push({
        ...dataObj,
        addtime: new Date().toLocaleTimeString(),
      });
    });

    _this.socket = window.socket;
    _this.userInfo = window.userInfo;
    _this.loginTime = new Date().toLocaleTimeString();
  },
};
</script>

<style lang="scss" scoped>
.send-c {
  position: fixed;
  bottom: 0;
  border-top: 1px solid #ddd;
}
.message-c {
  height: calc(100vh - 46px - 55px);
  overflow-y: scroll;
}
.wrapper {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  height: 100%;
}

.block {
  width: 200px;
  border-radius: 10px 0 0 10px;
  height: 100vh;
  transition: width 1s;
  background-color: #fff;
}
.user-line{
  text-align: right;
  padding: 3px;
  border-bottom: 1px solid #ccc;
}
.message-l {
  padding: 5px;
  color: #333;
  font-size: 14px;
}
.content{
  background-color: aqua;
  padding: 2px 6px;
}
</style>